<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>输入短信验证码</title>
    <link rel="stylesheet" href="../css/base.css"/>
    <style>
        /*改变placeholder的字体颜色*/
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #666666; opacity:1;
        }

        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #666666;opacity:1;
        }

        input:-ms-input-placeholder{
            color: #666666;opacity:1;
        }

        input::-webkit-input-placeholder{
            color: #666666;opacity:1;
        }
        html{
            background-color: #eeeeee;
        }
        .change_phone_layer{
            width: 100%;
            height: 100%;
        }
        .change_phone_header{
            height: 1.3rem;
           padding-top: 0.4rem;
            line-height: 0.88rem;
            color: #5f321a;
            font-size: 0.36rem;
            background-color: #fff;
            text-align: center;
        }
        .change_phone{
            height: 1.2rem;
            line-height: 1.2rem;
            font-size: 0.26rem;
            padding-left: 0.3rem;
        }
        .phone{
            width: 100% ;
            height: 1rem;
            line-height: 1rem;
            background-color: #fff;
            text-align: center;
            color:#f093a2;
            font-size: 0.32rem;
            margin-bottom: 0.5rem;
        }

        .phone em{
            color:#999999;
            /*display: none;*/
            opacity: 0;
            position: relative;
            right: -10%;
        }
        .phone em del{
            width: 0.6rem;
            height: 100%;
            position: absolute;
            left: -25%;
            top: 0%;
            background: url("../img/all_del_03.png") no-repeat center;
            -webkit-background-size: 100%;
            background-size: 100%;
        }
        .finish_message {
            display: block;
            width: 90%;
            height: 1rem;
            line-height: 1rem;
            position: relative;
            left: 5%;
            background-color: #5f321a;
            color:#fff;
            font-size: 0.36rem;
            text-align: center;
            border-radius: 5px;
        }

        #mask{
            width: 100%;
            height: 100%;
            opacity: 0.4; /*半透明*/
            filter: alpha(opacity=40); /*ie 6半透明*/
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }
        #show{
            position: absolute;
            width: 80%;
            height: 4.32rem;
            background-color: #fff;
            left:10%;
            top:30%;
            display: none;
            border-radius: 10px;
        }
        #show img{
            display: block;
            width: 30%;
            margin-left: 2rem;
            margin-top: 0.5rem;
        }
        #show span{
            margin-top: 0.2rem;
            width: 100%;
            text-align: center;
            font-size: 0.48rem;
            color:#333;
            display: block;
        }
    </style>
</head>
<body>
<div class="change_phone_layer">
    <div id="mask"></div>
    <div class="change_phone_header">
        输入短信验证码
    </div>
    <div class="change_phone">我们已经给您的手机号码发送了短信验证码，请注意查收</div>
    <form action="" class="phone">
        <input type="text" placeholder="请输入短信验证码" id="phone_blur"/> <em class="timer"> <del></del>重新发送（<i>60</i>）</em>
    </form>
    <!--获取到用户输入的手机号之后才能跳转-->
    <a  href="javascript:;" class="finish_message">完成</a>
    <div id="show">
        <img src="../img/success.png" alt=""/>
        <span>换绑成功</span>
    </div>
</div>
<script src="../js/x_rem.js"></script>
<script src="../js/jquery.js"></script>
<script>
//js 逻辑 多少秒后重新发送
//当用户在获取input输入框的焦点的时候 倒计时出现 执行倒计时  <0 的时候 清除计时器 再次执行逻辑
var count=60;
$("input").focus(function(){
    $(".timer").css("opacity","1");
    $(".timer i").html(count);
    var time=setInterval(function(){
            count--;
        $(".timer i").html(count);
        $(".timer del").click(function(){
            $("input").val("");
        })
         if(count<0){
            //重新发送
            clearInterval(time);
            $(".timer").html("重新发送");
            window.location.href="change_phone_link.html";
        }
    },1000)
})



    $(function(){
        $(".finish_message").click(function(event){
            $("#mask").css("display","block");
            $("#show").css("display","block");
            function timer(){
                window.location.href="./editData.html";
            }
           setTimeout(function(){
               timer()
           },1000);
            var event = event || window.event;
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
        });
        document.onclick = function (event) {
            var event = event || window.event;
            var target = event.target || event.srcElement;
            if (target.id !== "show") {
                //获取事件目标 如果不是show才能消失
                $("#mask").css("display","none");
                $("#show").css("display","none");
            }
        };


        //倒計時
        function resetCode() {
            $('.timer').show();
            $(".timer em").text('60');

            var second = 60;
            var time = null;
            timer= setInterval(function() {
                second -= 1;
                if(second > 0) {
                    $('.timer em').text(second);
                } else {
                    clearInterval(time);
                   /* $('.timer').show();
                    $('#J_resetCode').hide();*/
                }
            }, 1000);
        };
        //判断密码，手机号等
        var isPhone = false;
        function vali(elem,reg,errMsg){
            elem=$(elem);
            if(elem.val()==null||elem.val()==""||!reg.test(elem.val())){
                console.log(errMsg);
                return false;
            }else if(reg.test(elem.val())){//如果验证通过
                console.log("成功");
                isPhone = true;
                return true;
            }
        }
        //点击 获取动态码执行的语句
        $("#phone_blur").blur(function(){
            var user_input=$("#phone_blur").val();
            //调用验证函数
            vali(user_input,/^[a-zA-Z0-9_]{4}$/,"请输入正确的验证码");
            //如果isPhone为true的话执行ajax和倒计时
            if(isPhone){
                //调用倒计时函数
                resetCode();
            }
        })

    })
</script>
</body>
</html>